<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Aloha, World!</title>
	<script language="javascript">
	if (window.Aloha === undefined || window.Aloha === null)
		Aloha = {};
	Aloha.settings = {
				logLevels: {'error': true, 'warn': true, 'info': true, 'debug': false},
				errorhandling : false,
				ribbon: false,

				"placeholder": {
					'*': '<img src="http://aloha-editor.org/logo/Aloha%20Editor%20HTML5%20technology%20class%2016.png" alt="logo"/>&nbsp;Placeholder All',
					'#typo3span': 'Placeholder for span'
				},
				"i18n": {
					// you can either let the system detect the users language (set acceptLanguage on server)
					// In PHP this would would be '<?=$_SERVER['HTTP_ACCEPT_LANGUAGE']?>' resulting in
					// "acceptLanguage": 'de-de,de;q=0.8,it;q=0.6,en-us;q=0.7,en;q=0.2'
					// or set current on server side to be in sync with your backend system
					"current": "en"
				},
				"repositories": {
					"com.gentics.aloha.repositories.LinkList": {
						data: [
									{ name: 'Aloha Developers Wiki', url:'http://www.aloha-editor.com/wiki', type:'website', weight: 0.50 },
									{ name: 'Aloha Editor - The HTML5 Editor', url:'http://aloha-editor.com', type:'website', weight: 0.90  },
									{ name: 'Aloha Demo', url:'http://www.aloha-editor.com/demos.html', type:'website', weight: 0.75  },
									{ name: 'Aloha Wordpress Demo', url:'http://www.aloha-editor.com/demos/wordpress-demo/index.html', type:'website', weight: 0.75  },
									{ name: 'Aloha Logo', url:'http://www.aloha-editor.com/images/aloha-editor-logo.png', type:'image', weight: 0.10  }
						]
					}
				},
				"plugins": {
					"format": {
						// all elements with no specific configuration get this configuration
						config : [ 'b', 'i','sub','sup'],
							editables : {
							// no formatting allowed for title
							'#title'	: [ ],
							// formatting for all editable DIVs
							'div'		: [ 'b', 'i', 'del', 'sub', 'sup'  ],
							// content is a DIV and has class .article so it gets both buttons
							'.article'	: [ 'b', 'i', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat']
							}
					},
					"list": {
						// all elements with no specific configuration get an UL, just for fun :)
						config : [ 'ul' ],
							editables : {
							// Even if this is configured it is not set because OL and UL are not allowed in H1.
							'#title'	: [ 'ol' ],
							// all divs get OL
							'div'		: [ 'ol' ],
							// content is a DIV. It would get only OL but with class .article it also gets UL.
							'.article'	: [ 'ul' ]
							}
					},
					"link": {
						// all elements with no specific configuration may insert links
						config : [ 'a' ],
							editables : {
							// No links in the title.
							'#title'	: [  ]
							},
							// all links that match the targetregex will get set the target
						// e.g. ^(?!.*aloha-editor.com).* matches all href except aloha-editor.com
							targetregex : '^(?!.*aloha-editor.com).*',
							// this target is set when either targetregex matches or not set
							// e.g. _blank opens all links in new window
							target : '_blank',
							// the same for css class as for target
							cssclassregex : '^(?!.*aloha-editor.com).*',
							cssclass : 'aloha',
							// use all resources of type website for autosuggest
							objectTypeFilter: ['website'],
							// handle change of href
							onHrefChange: function( obj, href, item ) {
								if ( item ) {
								jQuery(obj).attr('data-name', item.name);
								} else {
								jQuery(obj).removeAttr('data-name');
								}
							}
					},
					"table": {
						// all elements with no specific configuration are not allowed to insert tables
						config : [ ],
							editables : {
							// Allow insert tables only into .article
							'.article'	: [ 'table' ]
							},
							// [{name:'green', text:'Green', tooltip:'Green is cool', iconClass:'GENTICS_table GENTICS_button_green', cssClass:'green'}]
						tableConfig : [
											{name:'hor-minimalist-a'},
											{name:'box-table-a'},
											{name:'hor-zebra'},
							],
							columnConfig : [
											{name:'bigbold', iconClass:'GENTICS_button_col_bigbold'},
											{name:'redwhite', iconClass:'GENTICS_button_col_redwhite'}
							],
						rowConfig : [
										{name:'bigbold', iconClass:'GENTICS_button_row_bigbold'},
										{name:'redwhite', iconClass:'GENTICS_button_row_redwhite'}
							]

					},
					"image": {
							config : { 'img': { 'max_width': '50px',
								'max_height': '50px' }},
							editables : {
							'#title'	: {}
							}
					},
					"dragndropfiles": { 'drop' : {    'max_file_size': 300000,
									'max_file_count': 2,
									'upload': {
													'uploader_instance':'Aloha.Repositories.Uploader',
													'config': {
															// can add more elements for Ext window styling
															'method':'POST',
															'url': "upload.php",
															'file_name_param':"filename",
															'file_name_header':'X-File-Name',
															'extra_headers':{}, //Extra parameters
															'extra_post_data': {}, //Extra parameters
															'send_multipart_form': false, //true for html4 TODO: make browser check
															//'additional_params': {"location":""},
															'www_encoded': false,
															'callback': function(response) { return response; }
														}
													}
									}
							}

					}
			};
	</script>
	<script	src="../../dep/jquery-1.5.1.js" ></script>
	<script	src="../../aloha.js" id="aloha-script-include" data-plugins="format,image,dragndropfiles"></script> <!--  toc,table,list, highlighteditables,link,image-->

	<link rel="stylesheet" href="../../aloha.css" id="aloha-style-include" type="text/css">
	<link rel="stylesheet" href="../../demo/world/index.css" type="text/css">

	<style>
		.hor-minimalist-a
		{
			background: #fff;
			border-collapse: collapse;
			text-align: left;
		}
		.hor-minimalist-a th
		{
			font-size: 130%;
			font-weight: normal;
			padding: 10px 8px;
			border-bottom: 2px solid #6678b1;
		}
		.hor-minimalist-a td
		{
			padding: 9px 8px 0px 8px;
		}
		.hor-minimalist-a tbody tr:hover td
		{
			color: #009;
		}

		.box-table-a
		{
			text-align: left;
			border-collapse: collapse;
		}
		.box-table-a th
		{
			font-size: 115%;
			font-weight: normal;
			padding: 8px;
			background: #b9c9fe;
			border-top: 4px solid #aabcfe;
			border-bottom: 1px solid #fff;
		}
		.box-table-a td
		{
			padding: 8px;
			background: #e8edff;
			border-bottom: 1px solid #fff;
			border-top: 1px solid transparent;
		}
		.box-table-a tr:hover td
		{
			background: #d0dafd;
		}

		.hor-zebra
		{
			text-align: left;
			border-collapse: collapse;
		}
		.hor-zebra th
		{
			font-size: 130%;
			font-weight: bold;
			padding: 10px 8px;
			border-bottom: 2px solid #6678b1;

		}
		.hor-zebra td
		{
			padding: 8px;
		}
		.hor-zebra tr:nth-child(2n+1) td
		{
			background: #e8edff;
		}

		td.bigbold {
			font-size: 200%;
			font-weight: bold;
		}
		td.redwhite {
			background-color: red;
			color: white;
			font-weight: bold;
		}

		.aloha-placeholder {
			background: #ddd;
			color: #666;
			margin: 5px 0 0 0;
		}

		#typo3span {
			display: block;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="tree-div"></div>
		<h1 id="title">Aloha, World!</h1>
		<div id="bodyContent">
			<div id="teaser" class="shorttext">
				<p>
					<b>Aloha</b> in the Hawaiian language means affection, love, peace, compassion and mercy. Since the middle of the 19th century, it also
					has come to be used as an English greeting to say <i>goodbye</i> and <i>hello</i>. Currently, it is mostly used in the sense of hello; however,
					it is used as the above.
				</p>
			</div>
			<div id="content" class="article">
				<h2>Etymology</h2>
				<p>
					The word <a href="http://en.wikipedia.org/wiki/Aloha-invalid" target="_blank" class="aloha">aloha</a> derives from the Proto-Polynesian root <i>*qalofa</i>. It has cognates in other Polynesian languages, such as Samoan alofa
					and Māori aroha, also meaning "love."
				</p>
				<table>
					<caption>Aloha Editor supports table captions.</caption>
					<tr><td>This</td><td>is</td><td>a</td><td>table</td></tr>
					<tr><td>with</td><td>some</td><td>dummy</td><td>data</td></tr>
					<tr><td>to</td><td>test</td><td>Aloha</td><td>tables.</td></tr>
				</table>
				<p>
					A folk etymology claims that it derives from a compound of the <a href="http://en.wikipedia.org/wiki/Hawaii" target="_blank" class="aloha">Hawaiian</a> words alo meaning "presence", "front", "face", or "share"; and
					ha, meaning "breath of life" or "essence of life." Although alo does indeed mean "presence" etc., the word for breath is spelled with a macron
					or kahakō over the a (hā) whereas the word aloha does not have a long a.
				</p>

				<h2>Usage</h2>
				<p>
					Before contact with the West, the words used for greeting were welina and anoai. Today, "aloha kakahiaka" is the phrase for "good
					morning." "Aloha ʻauinalā" means "good afternoon" and "aloha ahiahi" means "good evening." "Aloha kākou" is a common form of "welcome to all."
				</p>
				<p>
					In modern Hawaiʻi, numerous businesses have aloha in their names, with more than 3 pages of listings in the Oʻahu phone book alone.
				</p>

				<h2>Trends</h2>
				<p>
					Recent trends are popularizing the term elsewhere in the United States. Popular entertainer, Broadway star and Hollywood actress Bette
					Midler, born in Honolulu, uses the greeting frequently in national appearances. The word was also used frequently in the hit television drama
					Hawaii Five-O. In the influential 1982 film comedy Fast Times at Ridgemont High, the eccentric teacher Mr. Hand makes use of the greeting. The
					Aloha Spirit is a major concept in Lilo and Stitch, a very popular Disney series of movies and TV shows, set in Hawaiʻi. The drama series Lost,
					shot in Hawaiʻi, has a thank you note at the end of the credits saying "We thank the people of Hawaiʻi and their Aloha Spirit". Aloha is a term
					also used in the Nickelodeon program Rocket Power.
				</p>

				<ul>
					<li>Arguably the most famous historical Hawaiian song, "Aloha ʻOe" was written by the last queen of Hawaii, Liliʻuokalani.</li>
					<li>The term inspired the name of the ALOHA Protocol introduced in the 1970s by the University of Hawaii.</li>
					<li>In Hawaii someone can be said to have or show aloha in the way they treat others; whether family, friend, neighbor or stranger.</li>
				</ul>

				<h2>Placeholder</h2>
				<div id="typo3"></div>

				<h2>Inline Placeholder</h2>
				<span id="typo3span"></span>

			</div>
		</div>
	</div>
	<script type="text/javascript" defer>
		(function(window,undefined){
			// Prepare
			var	$body = $('body');

			// Bind to Aloha Ready Event
			$body.bind('aloha',function(){
				$('#typo3').aloha();
				$('#typo3span').aloha();
				$('#title').aloha();
				$('#teaser').aloha();
				$('#content').aloha();

			});
		})(window);
	</script>
</body>
</html>
